<template>
  <a-form auto-label-width layout="inline" size="mini">
    <a-form-item label="是否显示">
      <a-switch size="small" v-model="option.legend.show" />
    </a-form-item>
    <a-form-item label="类型">
      <a-select v-model="option.legend.type" size="small" placeholder="请选择图例类型">
        <a-option value="plain" label="普通图例" />
        <a-option value="scroll" label="可滚动翻页的图例" />
      </a-select>
    </a-form-item>
    <a-form-item label="模式">
      <a-select v-model="option.legend.selectedMode" size="small" placeholder="请选择图例模式">
        <a-option value="single" label="单选" />
        <a-option value="multiple" label="多选" />
      </a-select>
    </a-form-item>
    <a-form-item label="布局">
      <a-select v-model="option.legend.orient" size="small" placeholder="请选择图例布局">
        <a-option value="horizontal" label="水平布局" />
        <a-option value="vertical" label="垂直布局" />
      </a-select>
    </a-form-item>
    <a-form-item label="位置居左">
      <a-select v-model="option.legend.left" size="small" placeholder="请选择图例位置">
        <a-option value="left" label="居左" />
        <a-option value="center" label="居中" />
        <a-option value="right" label="居右" />
      </a-select>
    </a-form-item>
    <a-form-item label="位置居上">
      <a-select v-model="option.legend.top" size="small" placeholder="请选择图例位置">
        <a-option value="top" label="居上" />
        <a-option value="middle" label="居中" />
        <a-option value="bottom" label="居下" />
      </a-select>
    </a-form-item>
    <a-form-item label="标记类型">
      <a-select v-model="option.legend.icon" size="small" placeholder="请选择图例标记类型">
        <a-option value="" label="自动" />
        <a-option value="circle" label="圆形" />
        <a-option value="rect" label="矩形" />
        <a-option value="roundRect" label="圆角矩形" />
        <a-option value="triangle" label="三角形" />
        <a-option value="diamond" label="菱形" />
        <a-option value="pin" label="标记图形为五角星" />
        <a-option value="arrow" label="标记图形为箭头" />
        <a-option value="none" label="不显示" />
      </a-select>
    </a-form-item>
    <a-form-item label="标记对齐">
      <a-select v-model="option.legend.align" size="small" placeholder="请选择图例标记对齐">
        <a-option value="auto" label="自动" />
        <a-option value="left" label="居左" />
        <a-option value="right" label="居右" />
      </a-select>
    </a-form-item>
    <a-form-item label="内边距">
      <xiri-form v-model="option.legend.padding" option="number" :min="0" :max="100" />
    </a-form-item>
    <a-form-item label="图例项间距">
      <xiri-form v-model="option.legend.itemGap" option="number" :min="0" :max="100" />
    </a-form-item>
    <a-form-item label="图例项宽度">
      <xiri-form v-model="option.legend.itemWidth" option="number" :min="0" :max="100" />
    </a-form-item>
    <a-form-item label="图例项高度">
      <xiri-form v-model="option.legend.itemHeight" option="number" :min="0" :max="100" />
    </a-form-item>
    <div class="component-box">
      <div class="title-desc">图例文本样式设置</div>
      <text-style :options="option.legend.textStyle" />
    </div>
  </a-form>
</template>
<script setup>
import TextStyle from "@/plugins/common/options/textStyle.vue"

defineOptions({
  name: "echarts-legend"
})
const attrs = useAttrs()
const option = attrs.option
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
</style>
